<template>
  <div>
    <div class="bx1">
      <van-uploader :after-read="afterRead" />
      <form>
        <div id="count">
          <!-- <img
          src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/登录/u3548.png"
        /> -->
          账号：
          <input type="text" v-model="account" />
        </div>
        <div id="password">
          <!-- <img
          src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/登录/u3550.png"
        /> -->
          密码：
          <input type="password" v-model="password" />
          <span  @click="tip">忘记密码</span>
        </div>
        <button @click="userPost">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      account: "",
      password: "",
    };
  },
  methods: {
    tip(){
      Toast('密码怎么可以忘');
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    async userPost(event) {
      // 阻止表单提交的默认事件
      event.preventDefault();

      if (!this.$store.state.user.userRegister.username) {
        this.$router.push("/register");
      } else {
        const userFormData = {
          account: this.account,
          password: this.password,
        };

        // 向 vuex 抛发事件 ，执行user下的 loginAction 事件，将表单数据传入
        let code = await this.$store.dispatch("user/loginAction", userFormData);
        // console.log("login", code);
        if(code == 0){
          this.$router.replace('/recommend')
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bx1 {
  width: 100%;
  height: 100%;

  .van-uploader {
    position: relative;
    top: 100px;
    left: 150px;
  }
  form {
    width: 290px;
    height: 240px;
    background-color: rgb(212, 249, 212);
    position: relative;
    top: 100px;
    left: 40px;
    #count {
      position: relative;
      top: 30px;
      left: 15px;
      clear: both;
      input {
        width: 200px;
        height: 35px;
      }
    }
    #password {
      position: relative;
      top: 50px;
      left: 15px;
      overflow: hidden;
      input {
        width: 200px;
        height: 35px;
        outline-style: none;
      }
    }
    span {
      display: block;
      margin-top: 20px;
      margin-left: 195px;
      -webkit-font-feature-settings: "kern";
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #00cc99;
    }
    button {
      border-width: 0px;
      position: absolute;
      left: 25px;
      top: 185px;
      width: 240px;
      height: 45px;
      background: inherit;
      background-color: rgba(69, 201, 147, 1);
      border: none;
      border-radius: 3px;
    }
  }
}
</style>
